<template>
  <div class="layer-context">
    <Source :layer="layer" ref="source" :source="source" />
    <scale v-if="scale"  ref="scale" :layer="layer" :scale="scale" />
    <Color v-if="color" ref="color" :layer="layer" :color="color" />
    <Size v-if="size" ref="size" :layer="layer" :size="size" />
    <Shape v-if="shape" ref="shape" :layer="layer" :shape="shape" />
    <Style v-if="style" ref="style" :layer="layer" :style="style" />
    <Active v-if="active" ref="active" :layer="layer" :active="active" />
    <Select v-if="select" ref="select" :layer="layer" :select="select" />
    <filter-co v-if="filter" ref="filter" :layer="layer" :filter="filter" />
    <animate-co v-if="animate" ref="animate" :layer="layer" :animate="animate" />
    <slot></slot>
  </div>
</template>

<script>
import { HeatmapLayer, PointLayer } from "@antv/l7";
import {
  Active,
  Animate,
  Color,
  Filter,
  Scale,
  Select,
  Shape,
  Size,
  Source,
  Style
} from "../LayerAttribute";

export default {
  name: 'Layer',
  // inheritAttrs: false,
  // inject: ["Scene"],
  props: [
    // "Scene",
    'Scene',
    "source",
    "color",
    "shape",
    "style",
    "size",
    "scale",
    "active",
    "select",
    "filter",
    "animate",
    "options",
    "onLayerLoaded"
  ],
  components: {
    Active,
    AnimateCo: Animate,
    Color,
    FilterCo: Filter,
    Scale,
    Select,
    Shape,
    Size,
    Source,
    Style
  },
  data() {
    return {
      type: 'pointLayer',
      layer: null
    };
  },
  watch: {
    // Scene: {
    //   handler() {
    //     console.log('2222222', this.Scene)
    //     if (this.Scene) {
    //       this.initData();
    //     }
    //   },
    //   immediate: true,
    //   // deep: true
    // }
  },
  created() {
    // console.log('SceneSceneScene', this.Scene, this)
  },
  beforeDestroy() {
    const { Scene, layer } = this;
    const mapScene = Scene;
    mapScene.removeLayer(layer);
  },
  methods: {
    initData(Scene) {
      const {
        type,
        // source,
        // color,
        // shape,
        // style,
        // size,
        // scale,
        // active,
        // select,
        // filter,
        // animate,
        options,
        onLayerLoaded
      } = this;
      const mapScene = Scene;
      let l;
      function init() {
        console.log('layer')
        switch (type) {
          case "pointLayer":
            l = new PointLayer(options);
            break;
          case "heatmapLayer":
            l = new HeatmapLayer(options);
            break;
          default:
            l = new PointLayer(options);
        }
        l.on("inited", () => {
          console.log('初始化')
          if (onLayerLoaded) {
            onLayerLoaded(l, mapScene);
          }
        });
        console.log('lvv', l)
        return l;
      }
      this.layer = init();
      console.log('ddddd2222', this)
      mapScene.addLayer(this.layer);
      
      this.$refs.source && this.$refs.source.updateStyle(this.layer);
      this.$refs.scale && this.$refs.scale.updateStyle(this.layer);
      this.$refs.color && this.$refs.color.updateStyle(this.layer);
      this.$refs.size && this.$refs.size.updateStyle(this.layer);
      this.$refs.shape && this.$refs.shape.updateStyle(this.layer);
      this.$refs.style && this.$refs.style.updateStyle(this.layer);
      this.$refs.active && this.$refs.active.updateStyle(this.layer);
      this.$refs.select && this.$refs.select.updateStyle(this.layer);
      this.$refs.filter && this.$refs.filter.updateStyle(this.layer);
      this.$refs.animate && this.$refs.animate.updateStyle(this.layer);
      if (this.layer.inited && options) {
        this.layer.updateLayerConfig(options);
      }

      if (this.layer.inited && options?.zIndex) {
        this.layer.setIndex(options.zIndex);
      }

      if (this.layer.inited && options?.blend) {
        this.layer.setBlend(options.blend);
      }

      mapScene.render();
    }
  }
};
</script>

<style>
</style>